{include file="public/header"}
		<style type="text/css">
			img{
				max-width: 100% !important;
				height: auto;
			}
			video{
				max-width: 100% !important;
				height: auto;
			}
			.mainPage .contentBoxs .boxs1{
				width: 100%;
				height: auto;
				background-color: #fff;
				border-radius: 10px;
				height: auto;
				margin-top: 10px;
				padding-bottom: 0.8rem;
			}
			.mainPage .contentBoxs .boxs1 .titleBoxs{
				width: 100%;
				height: 1.3rem;
				line-height: 1.3rem;
				font-size: 0.5rem;
				color: #2E3192;
				text-align: center;
				letter-spacing: 4px;
				position: relative;
			}
			.mainPage .contentBoxs .boxs1 .titleBoxs:after{
				content: "";
				width: 76%;
				height: 1px;
				position: absolute;
				left: 13%;
				bottom: 0;
				background-color: #E6E6E6;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs{
				width: 76%;
				height: auto;
				box-sizing: border-box;
				margin: auto;
				padding: 20px 0;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows{
				width: 100%;
				height: auto;
				padding: 8px 0;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .lab{
				width: 100%;
				height: auto;
				font-size: 0.32rem;
				color: #000000;
				font-weight: bold;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .val{
				font-size: 0.28rem;
				color: #666666;
				padding: 4px 0;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .imgBoxs{
				width: 100%;
				height: auto;
				padding: 0.2rem 0;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .imgBoxs .imgs{
				width: calc(33.33333% - 0.14rem);
				height: 1.5rem;
				border-radius: 5px;
				overflow: hidden;
				background-color: #ccc;
				margin-right: 0.14rem;
				margin-bottom: 0.14rem;
				float: left;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .imgBoxs .both{
				clear: both;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows  .videoBoxs{
				width: 100%;
				height: 2.5rem;
				background-color: #ccc;
				margin: 0.2rem 0;
			}
			
			
		</style>

		<div id="index">
			
			<div class="mainPage">
				<div class="contentBoxs">
					<div class="bgBox" :style="{minHeight: winHeight}"></div>
					<div style="position: relative;z-index: 8;">
						<div class="headGoBackBox">
							<div class="backBtn" @click="goBack">
								<div class="goBackI"><img src="/public/static/mobile/image/goBackIcon.png" style="width: 100%;"></div>
								<div class="goBackT">返回</div>
							</div>
							<div style="flex: 1;"></div>
						</div>
                        {include file="public/logobox"}
						<div class="boxs1">
							<div class="titleBoxs">维修记录</div>
							<div class="centerBoxs">
								<div class="rows">
									<div class="lab">设备名称</div>
									<div class="val">{{info.good_name ? info.good_name : '暂无'}}</div>
								</div>
								<div class="rows">
									<div class="lab">序列号</div>
									<div class="val">{{info.sn ? info.sn : '暂无'}}</div>
								</div>
								<div class="rows">
									<div class="lab">故障原因</div>
									<div class="val">{{info.cause ? info.cause : '暂无'}}</div>
								</div>
								<div class="rows">
									<div class="lab">送修单位</div>
									<div class="val">{{info.danwei ? info.danwei : '暂无'}}</div>
								</div>
								<div class="rows">
									<div class="lab">联系人</div>
									<div class="val">{{info.contacts ? info.contacts : '暂无'}}</div>
								</div>
								<div class="rows">
									<div class="lab">联系电话</div>
									<div class="val">{{info.telphone ? info.telphone : '暂无'}}</div>
								</div>
								<div class="rows">
									<div class="lab">通知邮箱</div>
									<div class="val">{{info.email ? info.email : '暂无'}}</div>
								</div>
								<div class="rows">
									<div class="lab">维修状态</div>
									<div class="val">
										<span v-if="info.project" style="color: #00965e;">维修完成</span>
										<span v-if="!info.project" style="color: #ff4d4d;">维修中</span>
									</div>
								</div>
								<div class="rows">
									<div class="lab">维修项目</div>
									<div class="val">{{info.project ? info.project : '暂无'}}</div>
								</div>
								<div class="rows">
									<div class="lab">维修时间</div>
									<div class="val">{{info.date!='1970-01-01' ? info.date : '暂无'}}</div>
								</div>
								<div class="rows">
									<div class="lab">维修人</div>
									<div class="val">{{info.personnel ? info.personnel : '暂无'}}</div>
								</div>
								<div class="rows">
									<div class="lab">图片</div>
									<div class="imgBoxs" id="imgBox" v-show="imgInfo">
										<div class="imgs" v-for="(src,index) in imgInfo" v-bind:style="{ background: 'url(/uploads/img/'+ src +') no-repeat center', backgroundSize:'cover' }">
											<img :src="'/uploads/img/'+src" :data-imgurl="'/uploads/img/'+src" style="width: 100%;height:100%;opacity: 0;"/>
										</div>
										<div class="both"></div>
									</div>
									<div class="" v-show="!imgInfo"  style="font-size: 0.28rem;color: #666666;padding: 4px 0;">
										未上传图片
									</div>
								</div>
								<div class="rows" v-if="showCard">
									<div class="lab">视频</div>
									<div class="videoBoxs" v-show="info.video">
										<video style="width: 100%;height: 100%;" controls autoplay>
										  <source :src="'/uploads/video/'+info.video" type="video/ogg">
										  <source :src="'/uploads/video/'+info.video" type="video/mp4">
										  <source :src="'/uploads/video/'+info.video" type="video/webm">
										  <object :data="'/uploads/video/'+info.video" width="320" height="240">
										    <embed width="320" height="240" :src="'/uploads/video/'+info.video">
										  </object>
										</video>
									</div>
									<div class="" v-show="!info.video" style="font-size: 0.28rem;color: #666666;padding: 4px 0;">
										未上传视频
									</div>
								</div>
								<div class="rows" v-if="info.mark">
									<div class="lab" style="color: #00965e;">维修回复</div>
									<div class="val" v-html="info.mark"></div>
								</div>
							</div>
						</div>
                        {include file="public/footerbox"}
					</div>
				</div>
			</div>
		</div>


<script type="text/javascript">
 	window.onload = function() {
		setTimeout(funcName,1000);  //延迟1秒载入图片放大插件
		function funcName() {
			var viewer = new Viewer(document.getElementById('imgBox'), {
				url: 'data-imgurl'
			});
		}
	}
</script>
<script type = "text/javascript">
	new Vue({
	  	el: '#index',
	  	data: function () {
		  	return {
		  		winHeight:document.documentElement.clientHeight+"px",
				showCard:false,
		    	id:"",
				info:[],
				imgInfo:[],
				sn:"",

				activeColor: 'a.jpg',
  				fontSize: 30
		  	}
	  	},
		  // 创建页面
		created(){
			var _this=this;
			// 获取上一页面的参数
			//var id = decodeURI(window.location.href.split("?")[1]);
			//_this.id=id.slice(3);
			var id ="{$id}";
			var sn ="{$sn}";
			_this.id=id;
			_this.sn=sn;
		},
	  	//页面加载需要执行的方法
	  	mounted:function(){
        	var _this=this;
			_this.getImg();
			_this.getData();
			
        },
	  	methods: {
			//   返回
			goBack(){
				window.history.back(-1); 
			},
	  		// 获取页面数据
			getData:function(){
				var _this=this;
				// console.log( _this.id)
				axios.get('/api/mobile/fixDetails', {
					params: { id: _this.id }
				})
				.then(function (res) {
					console.log(res);
					_this.info=res.data.info;
					setTimeout(function(){
						_this.showCard = true;
					},1000);
					
					
				}).catch(function (error) {

				});
			},
			// 获取维修图片
			getImg:function(){
				var _this=this;
				// console.log( _this.id)
				axios.get('/api/mobile/getFixImgs', {
					params: { id: _this.id }
				})
				.then(function (res) {
					// console.log(res.data.info);
					_this.imgInfo=res.data.info;
					setTimeout(function(){
						_this.showCard = true;
					},1000);
					
				}).catch(function (error) {

				});
			},
	  		
	  	},
	})
</script>
{include file="public/footer"}
